<template>
  <div>
    <header class="navbar_login">
      <div class="nav-wrap-left" @click="goBack">
        <a class="react back" href="javascript:history.back()"
          ><i class="text-icon icon-back"></i
        ></a>
      </div>
      <h1 class="nav-header">泽枫影城</h1>
      <div class="nav-wrap-right">
        <a
          ><span><i></i></span
        ></a>
      </div>
    </header>
    <section id="login_main">
      <van-cell-group style="backgroundcolor: #f8f8f8">
        <van-field
          style="backgroundColor: #f8f8f8"
          v-model="phone"
          required
          label="手机号"
          placeholder="请输入手机号"
          clearable
          :error-message="phone_err_msg"
          @blur="phone_blur"
        />
        <van-field
          style="backgroundColor: #f8f8f8"
          v-model="verifycode"
          center
          clearable
          required
          label="验证码"
          placeholder="请输入验证码"
          :error-message="code_err_msg"
          @blur="code_blur"
        >
          <van-button
            style="color:#999"
            color="#e5e5e5"
            slot="button"
            size="small"
            type="primary"
            @click="sendVerifycode()"
            :disabled="!disabledCodeBtn"
            >{{ codeText }}</van-button
          >
        </van-field>
        <div class="btn padding">
          <van-button
            style="color:#999"
            color="#e5e5e5"
            type="primary"
            size="large"
            @click="verify_login"
            >登陆</van-button
          >
        </div>
        <div class="prompt-text">未注册的手机号将自动生成新账号</div>
      </van-cell-group>
    </section>
    <footer>
      <div class="copyright">
        <span class="copyright"
          >© 泽枫影城 客服电话：<a data-evt="ft/hotline" href="tel:10086"
            >10086</a
          ></span
        >
      </div>
    </footer>
  </div>
</template>
<script>
import Vue from "vue";
import { Field, CellGroup, Button, Toast } from "vant";
import http from "../../utils/htttp";
import 'vant/lib/button/style/less';
Vue.use(Field).use(CellGroup).use(Button).use(Toast);
export default {
  data() {
    return {
      phone: "",
      verifycode: "",
      codeText: "获取",
      disabledCodeBtn: true,
      phone_err_msg: "",
      code_err_msg: "",
    };
  },
  mounted() {
    console.log(this.$router, this.$route);
    document.querySelector("body").setAttribute("id", "account-login");
    document.querySelector("body").style.backgroundColor = "#f8f8f8";
  },
  methods: {
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = true;
        this.codeText = "获取";
        return;
      } else {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    //发送短信
    sendVerifycode() {
      if (!this.phone) return (this.phone_err_msg = "手机号码不能为空");
      if (!/^1[3|4|5|7|8|9]\d{9}$/.test(this.phone))
        return (this.phone_err_msg = "手机号码有误，请重填");
      this.phone_err_msg = "";
      this.countDown(60);
      http({
        method: "post",
        url: "/sendcode",
        data: {
          type: "1",
          mobile: this.phone,
        },
      }).then((res) => {
        if (res.data.msg == "ok") return Toast("短信验证码发送成功!");
        Toast(res.data.msg);
      });
    },
    //phone_blur
    phone_blur() {
      if (!this.phone) return (this.phone_err_msg = "手机号码不能为空");
      if (!/^1[3|4|5|7|8|9]\d{9}$/.test(this.phone)) {
        this.phone_err_msg = "手机号码有误，请重填";
      } else {
        this.phone_err_msg = "";
      }
    },
    //code_blur
    code_blur() {
      if (!this.verifycode) return (this.phone_err_msg = "验证码不能为空");
    },
    //登录验证
    verify_login() {
      if (!this.phone) return (this.phone_err_msg = "手机号码不能为空");
      if (!this.verifycode) return (this.code_err_msg = "验证码不能为空");
      if (!/^1[3|4|5|7|8|9]\d{9}$/.test(this.phone))
        return (this.phone_err_msg = "手机号码有误，请重填");
      // this.$router.replace('/user')
      http({
        method: "post",
        url: "/login",
        data: {
          mobile: this.phone,
          smsCode: this.verifycode,
        },
      }).then((res) => {
        if (res.data.msg == "ok") {
          Toast("登陆成功!");
          window.sessionStorage.setItem("loginInfo", JSON.stringify(res.data));
          let fullPath = window.sessionStorage.getItem("fullPath");

          this.$router.push(fullPath);
        } else {
          Toast(res.data.msg);
        }
      });
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.padding {
  padding: 1.3em;
  background-color: #f8f8f8;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.28em;
  line-height: 1;
  color: #333;
  background-color: #f8f8f8;
  margin: 0;
}
.navbar_login {
  height: 1.01rem;
  color: #fff;
  border-bottom: none;
  background-color: #df2d2d;
  display: -webkit-box;
  display: -ms-flexbox;
  position: relative;
}
.navbar_login .nav-wrap-left {
  position: absolute;
  height: 1.01rem;
  line-height: 1.01rem;
}
.navbar_login h1.nav-header {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  font-size: 0.36rem;
  font-weight: lighter;
  text-align: center;
  line-height: 1rem;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.nav-wrap-left a.back {
  padding: 0 0.3rem;
}
.text-icon.icon-back {
  width: 0.45rem;
  height: 0.45rem;
  vertical-align: middle;
  position: relative;
}
.text-icon.icon-back:before {
  content: "";
  display: block;
  position: absolute;
  left: 0.07rem;
  top: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-bottom: 0.02rem solid #fff;
  border-left: 0.02rem solid #fff;
  -webkit-transform: scaleY(0.7) rotateZ(45deg);
  -moz-transform: scaleY(0.7) rotateZ(45deg);
  -ms-transform: scaleY(0.7) rotateZ(45deg);
}
.mylogin-wrapper .iLoginComp-send-verify-code-text.iLogincomp-active {
  color: #df2d2d;
  border-color: #df2d2d;
}
.mylogin-wrapper .iLoginComp-login-btn-wrapper.iLogincomp-active {
  background: #df2d2d;
}
footer {
  margin-top: 0.3rem;
  padding: 0 0.2rem 0.4rem;
  background-color: #f8f8f8;
}
.copyright {
  text-align: center;
}
a {
  color: #df2d2d;
  text-decoration: none;
  outline: 0;
  display: inline;
}
.prompt-text {
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  background-color: #f8f8f8;
  color: #999999;
  text-align: center;
}
.navbar-pc {
  display: none;
}

.site-body-wrapper .promotion-banner {
  display: none;
}

.pc-body {
  background: #fff;
  font-size: 16px;
}
.pc-body .navbar {
  display: none;
}
.pc-body .navbar-pc {
  display: block;
  width: 980px;
  height: auto;
  margin: 40px auto 30px;
  position: relative;
  overflow: hidden;
}
.pc-body .navbar-pc .site-logo {
  width: 230px;
  height: 45px;
  background-position: -716px -677px;
  background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.ae0e5d7.png);
  background-size: initial;
  margin: 0;
  background-repeat: no-repeat;
  float: left;
  display: inline;
  text-indent: -9999px;
  overflow: hidden;
}

.pc-body .site-body-wrapper {
  margin: 0 auto 70px;
  width: 980px;
  display: flex;
}

.pc-body .site-body-wrapper .promotion-banner {
  display: block;
  float: left;
  height: 370px;
  margin: 0 115px 0 0;
  width: 480px;
}

.pc-body #iLoginComp {
  margin-top: 60px;
}

.pc-body .prompt-text {
  color: #bbbbbb;
  font-size: 14px;
}

@media only screen and (min-width: 320px) {
  .pc-body .iLoginComp-wrapper {
    font-size: 16px;
  }
  .pc-body .mtfe-tip-mtfe-wrapper {
    font-size: 16px;
    width: 30%;
    top: 16em;
  }
  .pc-body .mtfe-model-mtfe-wrapper {
    font-size: 16px;
  }
  .pc-body .mtfe-secyoda-mtfe-wrapper {
    font-size: 16px;
  }
}

.pc-body footer {
  background: #fff;
  font-size: 12px;
}
html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
@media only screen and (min-width: 320px) {
  .fontSize {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .fontSize {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .fontSize {
    font-size: 30px;
  }
}
.mtfe-tip-mtfe-wrapper {
  display: none;
  position: absolute;
  width: 70%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 9em;
  padding: 0.5em 1em;
  border-radius: 0.25em;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 50;
  text-align: center;
}
@media only screen and (min-width: 320px) {
  .mtfe-tip-mtfe-wrapper {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .mtfe-tip-mtfe-wrapper {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .mtfe-tip-mtfe-wrapper {
    font-size: 30px;
  }
}
.mtfe-model-mtfe-wrapper {
  display: none;
  position: absolute;
  width: 80%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 9em;
  padding-top: 0.5em;
  border-radius: 0.25em;
  background: #fff;
  color: #fff;
  z-index: 50;
  text-align: center;
}
@media only screen and (min-width: 320px) {
  .mtfe-model-mtfe-wrapper {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .mtfe-model-mtfe-wrapper {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .mtfe-model-mtfe-wrapper {
    font-size: 30px;
  }
}
@-webkit-keyframes a {
  0%,
  39%,
  to {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes a {
  0%,
  39%,
  to {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.fadingCircle {
  width: 1em;
  height: 1em;
  position: relative;
  margin: auto;
  display: none;
  vertical-align: middle;
}
@media only screen and (min-width: 320px) {
  .fadingCircle {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .fadingCircle {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .fadingCircle {
    font-size: 30px;
  }
}
.fadingCircle .sms-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.fadingCircle .sms-circle:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
}
.fadingCircle .sms-circle2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.fadingCircle .sms-circle2:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.fadingCircle .sms-circle3 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.fadingCircle .sms-circle3:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.fadingCircle .sms-circle4 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fadingCircle .sms-circle4:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.fadingCircle .sms-circle5 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.fadingCircle .sms-circle5:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.fadingCircle .sms-circle6 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}
.fadingCircle .sms-circle6:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.fadingCircle .sms-circle7 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fadingCircle .sms-circle7:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.fadingCircle .sms-circle8 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
}
.fadingCircle .sms-circle8:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.fadingCircle .sms-circle9 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}
.fadingCircle .sms-circle9:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.fadingCircle .sms-circle10 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fadingCircle .sms-circle10:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.fadingCircle .sms-circle11 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
}
.fadingCircle .sms-circle11:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.fadingCircle .sms-circle12 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
}
.fadingCircle .sms-circle12:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #a1a1a1;
  border-radius: 100%;
  -webkit-animation: a 1.2s infinite ease-in-out both;
  animation: a 1.2s infinite ease-in-out both;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
.mtfe-smscodeyoda-mtfe-wrapper {
  display: none;
  width: 80%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 40%;
  position: absolute;
  z-index: 30;
}
.mtfe-secyoda-mtfe-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 999;
  overflow-y: scroll;
}
@media only screen and (min-width: 320px) {
  .mtfe-secyoda-mtfe-wrapper {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .mtfe-secyoda-mtfe-wrapper {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .mtfe-secyoda-mtfe-wrapper {
    font-size: 30px;
  }
}
.mtfe-mask-mtfe-wrapper,
.mtfe-mask-second-mobile-wrapper {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 20;
}
.mtfe-domtip-mtfe-wrapper {
  font-size: 0.8em;
  color: #ff4a4a;
  margin-top: 0.6em;
  display: block;
}
.mtfe-mask-second-mobile-wrapper {
  background-color: #fff;
  opacity: 1;
  z-index: 15;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile {
  font-size: 200px;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-tip {
  font-size: 0.18em;
  margin: 2.194em auto 0;
  color: #666;
  width: 16.444em;
  letter-spacing: -0.024em;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar {
  margin: 0.86em auto 0;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img:not([src]),
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img[src=""] {
  opacity: 0;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-nickName {
  font-size: 0.14em;
  margin: 0.642em auto 0;
  text-align: center;
  color: #333;
  letter-spacing: -0.024px;
  font-weight: 700;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-confirm {
  font-size: 0.18em;
  margin: 1.805em auto 0;
  width: 16.444em;
  height: 2.444em;
  line-height: 2.444em;
  text-align: center;
  border-radius: 0.222em;
  letter-spacing: -0.024em;
  color: #fff;
  background-color: #ffc300;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-deny {
  font-size: 0.18em;
  margin: 1.805em auto 0;
  width: 16.444em;
  height: 2.444em;
  line-height: 2.444em;
  text-align: center;
  border-radius: 0.222em;
  letter-spacing: -0.024em;
  color: #999;
  border: 1px solid #999;
}
.mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-tip-2 {
  font-size: 0.14em;
  margin: 0.642em auto 0;
  width: 21.142em;
  height: 2.444em;
  color: #999;
  letter-spacing: -0.024px;
}
.iLoginComp-clear-input-wrapper {
  position: relative;
  padding: 0.6em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.iLoginComp-clear-input:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.iLoginComp-clear-input:after,
.iLoginComp-clear-input:before {
  content: "";
  position: absolute;
  width: 0.8em;
  right: 0.2em;
  height: 1px;
  background-color: #999;
  border-radius: 0.15em;
}
.iLoginComp-clear-input:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.iLoginComp-wrapper {
  width: 100%;
  padding: 1.2em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (min-width: 320px) {
  .iLoginComp-wrapper {
    font-size: 16px;
  }
}
@media only screen and (min-width: 480px) {
  .iLoginComp-wrapper {
    font-size: 24px;
  }
}
@media only screen and (min-width: 560px) {
  .iLoginComp-wrapper {
    font-size: 30px;
  }
}
.iLoginComp-phone-num-wrapper {
  -ms-flex-pack: distribute;
  justify-content: space-around;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.6em;
  height: 1.4em;
}
.country-area,
.iLoginComp-phone-num-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.country-area {
  max-width: 50%;
  min-width: 0;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 1em;
  color: #646464;
}
.iLoginComp-countryname {
  margin-right: 1.6px;
  margin-right: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iLoginComp-countrycode {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.right-arrow {
  width: 0.3em;
  min-width: 0.3em;
  height: 0.3em;
  display: inline-block;
  border-right: 1px solid #646464;
  border-top: 1px solid #646464;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 0.2em;
  margin-right: 0.6em;
}
.iLoginComp-phone-num-input {
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 0;
  min-width: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 1em;
}
.iLoginComp-phone-num-input,
.iLoginComp-phone-num-input:focus {
  outline: none;
  background-color: inherit;
}
.iLoginComp-phone-num-input::-webkit-input-placeholder {
  color: #ccc;
}
.iLoginComp-phone-num-input:-moz-placeholder,
.iLoginComp-phone-num-input::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
.iLoginComp-phone-num-input:-ms-input-placeholder,
.iLoginComp-phone-num-input::-ms-input-placeholder {
  color: #ccc;
}
.iLoginComp-phone-num-input::placeholder {
  color: #ccc;
}
.iLoginComp-verify-code-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.iLoginComp-code-input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border: 0;
  min-width: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 1em;
}
.iLoginComp-code-input,
.iLoginComp-code-input:focus {
  outline: none;
  background-color: inherit;
}
.iLoginComp-code-input::-webkit-input-placeholder {
  color: #ccc;
}
.iLoginComp-code-input:-moz-placeholder,
.iLoginComp-code-input::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
.iLoginComp-code-input:-ms-input-placeholder,
.iLoginComp-code-input::-ms-input-placeholder {
  color: #ccc;
}
.iLoginComp-code-input::placeholder {
  color: #ccc;
}
.iLogincomp-opbtn-wrapper {
  margin-top: 2em;
}
.iLoginComp-cancel-btn-wrapper,
.iLoginComp-login-btn-wrapper {
  text-align: center;
  color: #999;
  background: #e5e5e5;
  height: 2.6em;
  line-height: 2.6em;
  border-radius: 0.3em;
  width: 100%;
  display: block;
  border: none;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.iLoginComp-cancel-btn-wrapper:focus,
.iLoginComp-login-btn-wrapper:focus {
  outline: 0;
}
.iLoginComp-login-btn-wrapper.iLogincomp-active {
  color: #fff;
  background: #06c1ae;
}
.iLoginComp-send-verify-code-text {
  margin-left: 0.5em;
  font-size: 0.8em;
  color: #999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #dcdcdc;
  border: 1px solid #dcdcdc;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.iLoginComp-send-verify-code-text.iLogincomp-active {
  color: #06c1ae;
  border: 1px solid #06c1ae;
  background: 0;
}
.iLogincomp-count-down {
  color: #999;
  background-color: #dcdcdc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
</style>